<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- computed 计算属性，本质上面还是属性，写法如函数，命名如属性-->
<!-- 

区别：
    1.计算属性有缓存,有且仅有计算属性内部的属性值发生变化时才会被调用； 函数没有缓存,每次执行都会被调用。

    2.计算属性默认只有get函数,没有set只支持单向，若想使用双向可进行手动添加； 函数只有单向。

    3.调用时计算属性是一种属性，函数时候一种方法。
 -->
<body>
    <div id="app">
        <h3>{{fullName}}</h3>
        <button @click="update">修改计算属性值</button>
    </div>
    <script src="js/vue.js"></script>

    <script>
        // 理解 get 与 set 方法
        // let num = 100;
        // console.log(num);   // 100 get 方法
        // num = 200;          // set 方法
        // console.log(num);


        const HelloVue = {
            data(){
                return {
                    firstName: "乔治",
                    lastName: "希尔"
                }
            },
            // 计算属性，一般是用于只读情况
            computed:{
                /* 计算属性中的 setter 与 getter */
                fullName: {
                    set(newValue){
                        console.log("------set()------", newValue);
                        const nameArr = newValue.split("·");
                        this.firstName = nameArr[0];
                        this.lastName = nameArr[1];
                    },
                    get(){
                        console.log("------get()------");
                        return this.firstName + "·" + this.lastName;
                    }
                }
            },
            methods: {
                update(){
                    this.fullName = "简·爱";
                },
            }
        };

        const app = Vue.createApp(HelloVue).mount("#app");
       
    </script>
</body>
</html>